<template>
    <el-dialog
            :visible.sync="message"
            title="注册">
        <span>
            <el-form :model="regForm" label-width="80px" ref="regRef"
                     :rules="registerRule">
                <el-form-item label="用户" prop="userName">
                    <el-input v-model="regForm.userName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                     <el-input v-model="regForm.passWord" placeholder="请输入密码"
                     type="password" :show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="nextPassWord">
                     <el-input v-model="regForm.nextPassWord" placeholder="请确认密码"
                               type="password" :show-password="true"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                     <el-input v-model="regForm.email" placeholder="请输入QQ邮箱,及时查收回复消息"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <span slot="footer">
            <el-button @click="quit" size="small">取 消</el-button>
            <el-button @click="register" type="primary" size="small">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {register} from '../../../network/user'

    export default {
        name: "RegisterDia",
        props: {
            message: {
                type: Boolean,
                default() {
                    return false
                }
            }
        },
        data(){
            return {
                regForm:{
                    userName:'',
                    passWord:'',
                    nextPassWord:'',
                    email:'',
                },
                registerRule:{
                    userName:[
                        {required:true,min:3,message:'请输入用户名,至少三个字符',trigger:'blur'}
                    ],
                    passWord:[
                        {required:true,min:6,message:'请输入密码,至少6位密码',trigger:'blur'}
                    ],
                    nextPassWord:[
                        {required:true,message:'确认密码',trigger:'blur'}
                    ],
                    email:[
                        {required:true,type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}
                    ]
                },

            }
        },
        methods: {
            clearForm() {
                this.$refs.regRef.resetFields();
            },
            quit() {
                this.$bus.$emit('registerDia');
                this.clearForm()
            },
            register() {
                this.$refs.regRef.validate(valid => {
                    if (valid !== true){
                        this.$message.warning('请输入必要信息!')
                    }else{
                        if (this.regForm.passWord !== this.regForm.nextPassWord){
                            this.$message.warning('两次密码不一致，请重新输入!')
                        }else{
                            register(this.regForm).then(res => {
                                if (res.data.meta.status !== 200){
                                    this.$message.warning(res.data.meta.msg)
                                }else{
                                    this.$message.success(res.data.meta.msg);
                                    this.clearForm();
                                    this.$bus.$emit('registerDia');
                                }
                            });
                        }
                    }
                })

            },
        },
    }
</script>

<style lang="less">
    .el-dialog {
        width: 35rem;
        background:-webkit-linear-gradient(left bottom,skyblue,pink);
        border-radius: 5px;
    }
    @media screen and (min-width: 1200px) {
        .el-dialog{
            width: 400px;
        }
    }

</style>